import { computed, defineComponent, ref } from "vue";
import PageTitle from "@/components/PageTitle";
import { IFormRef } from "@/components/Form/types";
import ButtonView from "@/components/ButtonView";
import { useRequest } from "./request";
import FormGroup from "@/components/FormGroup";
import { FormGroupPropsData } from "@/components/FormGroup/types";
import { useRoute } from "vue-router";
export default defineComponent({
  name: "",
  setup() {
    const route = useRoute();
    const userInfo = localStorage.getItem("userInfo") as string;
    const userInfoJSON = JSON.parse(userInfo) as any;
    const form = ref({
      applyName: userInfoJSON.name,
      phone: userInfoJSON.phone,
      productionId: route.query.productionId,
    });
    const formRef = ref<IFormRef>();
    const { confirm, listResult } = useRequest();

    console.log("农资品类", listResult);

    const render1 = () => {
      const data = computed<FormGroupPropsData[]>(() => [
        {
          title: "",
          data: [
            {
              label: "真实姓名",
              type: "input",
              key: "applyName",
              readonly: true,
              rules: [
                {
                  required: true,
                },
              ],
            },
            {
              label: "联系电话",
              type: "input",
              key: "phone",
              readonly: true,
              rules: [
                {
                  required: true,
                },
              ],
            },
            {
              label: "农资用品",
              type: "select",
              key: "productionId",
              rules: [
                {
                  required: true,
                  message: "请选择农资用品",
                },
              ],
              typeData: listResult.value,
            },
            {
              label: "代购数量",
              type: "input",
              key: "quantity",
              rules: [
                {
                  required: true,
                },
              ],
            },
          ],
        },
        {
          title: "",
          data: [
            {
              key: "remarks",
              label: "备注",
              type: "textarea",
            },
          ],
        },
      ]);
      return (
        <div>
          <FormGroup
            class="!mt-[10px]"
            data={data.value}
            v-model={form.value}
            ref={formRef}
          />
          <ButtonView
            block
            type="primary"
            onClick={() => {
              formRef.value?.submit(({ result, error, submitState }) => {
                submitState && confirm(form.value);
              });
            }}
            class="!mt-[20px] !h-[40px]"
          >
            确定
          </ButtonView>
        </div>
      );
    };

    return () => {
      return (
        <PageTitle title="代购农资" childClass={"p-[10px]"}>
          {render1()}
        </PageTitle>
      );
    };
  },
});
